<template>
  <yk-space class="gather">
    <div v-for="(item, index) in gathers" :key="index" class="gather_list"
      :style="{ background: `linear-gradient(${item.bgColor})` }">
      <yk-space dir="vertical" size="s">
        <yk-text type="secondary">{{ item.name }}</yk-text>
        <yk-title level="2" style="margin: 0">{{ item.total }}</yk-title>
      </yk-space>
      <yk-button v-if="index > 0" size="xl" shape="square" type="secondary" @click="goEditPage(item.path)">
        <IconPlusOutline />
      </yk-button>
    </div>
  </yk-space>
</template>
<script setup lang="ts">
import { onMounted, ref } from "vue";
import { overLink } from "../../utils/menu";
//MOCK数据
// import { overview } from "../../mock/data";
import {useRouter} from 'vue-router'
import { getOverviewApi } from "../../api/overview_api";
import { useUserStore } from "../../stores/user";

const userStore = useUserStore();

const router = useRouter()
const gathers = ref(overLink);


//获取数据
const drawGatherData = () => {
  //mock数据
  // let data = overview.data;
  let request = {
    token: userStore.token,
  }
  getOverviewApi(request).then((res: any) => {
      let data = res.data.data;
      gathers.value[0].total = data.file;
      gathers.value[1].total = data.article;
      gathers.value[2].total = data.gallery;
      gathers.value[3].total = data.diary;
  })
  // gathers.value[0].total = data.file;
  // gathers.value[1].total = data.article;
  // gathers.value[2].total = data.gallery;
  // gathers.value[3].total = data.diary;
};

const goEditPage = (path: string) => {
  router.push(path)
};

onMounted(() => {
  drawGatherData();
});
</script>
<style scoped lang="less">
.gather {
  width: 100%;

  &_list {
    width: 25%;
    background: #eee;
    display: flex;
    justify-content: space-between;
    padding: @space-xl;
    align-items: center;
    border-radius: @radius-m;

    &:first-child {

      .yk-title,
      .yk-text {
        color: @white;
      }
    }
  }
}
</style>
